<template>
  <div class="info-style">
    <div>
      <Title
        title="基本信息"
        :empty-show-bool="!detailBaseInfoData.basePlanOrderInfo"
      />
      <el-row v-if="detailBaseInfoData.basePlanOrderInfo" :gutter="24">
        <el-col :span="12">
          <span>核账状态：</span>
          <span>{{
            getStatusText(
              detailBaseInfoData.basePlanOrderInfo.checkingStatus,
              checking_status_options
            )
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>所属发货申请编号：</span>
          <span>{{
            detailBaseInfoData.basePlanOrderInfo.deliveryApplyNo
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>所属PI：</span>
          <span>{{ detailBaseInfoData.basePlanOrderInfo.piNo }}</span>
        </el-col>
        <el-col :span="12">
          <span>所属订单：</span>
          <span>{{
            detailBaseInfoData.basePlanOrderInfo.orderNo
          }}</span>
        </el-col>

        <el-col :span="12">
          <span>客户名称：</span>
          <span>{{ detailBaseInfoData.basePlanOrderInfo.companyNameForeign }}</span>
        </el-col>
        <el-col :span="12">
          <span>交易主体：</span>
          <span>{{ detailBaseInfoData.basePlanOrderInfo.payeeName }}</span>
        </el-col>
        <el-col :span="24">
          <span>账期/天：</span>
          <span>{{ detailBaseInfoData.basePlanOrderInfo.accountPeriod }}</span>
        </el-col>
        <el-col :span="12">
          <span>回款阶段：</span>
          <span>
            {{
              getStatusText(
                detailBaseInfoData.basePlanOrderInfo.paymentStage,
                payment_stage_options
              )
            }}</span>
        </el-col>
        <el-col :span="12">
          <span>计划回款日期：</span>
          <span>{{
            formatTime(
              detailBaseInfoData.basePlanOrderInfo.paymentDeadline,
              'YYYY-MM-DD'
            )
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>是否逾期：</span>
          <span>{{
            detailBaseInfoData.basePlanOrderInfo.overdue ? '是' : '否'
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>逾期天数：</span>
          <span>{{ detailBaseInfoData.basePlanOrderInfo.overDays }}</span>
        </el-col>
      </el-row>
    </div>
    <div>
      <Title
        title="收款信息"
        :empty-show-bool="!detailBaseInfoData.payeeInfo"
      />
      <el-row v-if="detailBaseInfoData.payeeInfo" :gutter="24">
        <el-col :span="24">
          <span>应收金额：</span>
          <span>{{
            `${detailBaseInfoData.payeeInfo.currencyCode} ${
              toFixedHandle(detailBaseInfoData.payeeInfo.paymentAmount)
            }`
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>应收现金：</span>
          <span>{{
            `${detailBaseInfoData.payeeInfo.currencyCode} ${
              toFixedHandle(detailBaseInfoData.payeeInfo.funds)
            }`
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>应收返点：</span>
          <span>{{
            `${detailBaseInfoData.payeeInfo.currencyCode} ${
              toFixedHandle(detailBaseInfoData.payeeInfo.rebate)
            }`
          }}</span>
        </el-col>
        <el-col :span="24">
          <span>占用信用总额：</span>
          <span>{{
            `${detailBaseInfoData.payeeInfo.currencyCode} ${
              toFixedHandle(detailBaseInfoData.payeeInfo.totalCredit)
            }（USD ${toFixedHandle(detailBaseInfoData.payeeInfo.totalCreditUsd)}）`
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>占用中信保：</span>
          <span>{{
            `USD ${
              toFixedHandle(detailBaseInfoData.payeeInfo.sinosureCreditUsd)
            }`
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>占用公司信用：</span>
          <span>{{
            `USD ${
              toFixedHandle(detailBaseInfoData.payeeInfo.companyCreditUsd)
            }`
          }}</span>
        </el-col>
        <el-col :span="24">
          <span>实收金额：</span>
          <span>{{
            `${detailBaseInfoData.payeeInfo.currencyCode} ${
              toFixedHandle(detailBaseInfoData.payeeInfo.actualPaymentAmount)
            }`
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>实收现金：</span>
          <span>{{
            `${detailBaseInfoData.payeeInfo.currencyCode} ${
              toFixedHandle(detailBaseInfoData.payeeInfo.actualFunds)
            }`
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>实收返点：</span>
          <span>{{
            `${detailBaseInfoData.payeeInfo.currencyCode} ${
              toFixedHandle(detailBaseInfoData.payeeInfo.actualRebate)
            }`
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>币种：</span>
          <span>{{
            getStatusText(
              detailBaseInfoData.payeeInfo.currencyCode,
              currency_options
            )
          }}</span>
        </el-col>
        <el-col :span="12">
          <span>核账时间：</span>
          <span>{{ formatTime(detailBaseInfoData.payeeInfo.auditTime) }}</span>
        </el-col>
        <el-col :span="12">
          <span>备注：</span>
          <span>{{ detailBaseInfoData.payeeInfo.remark }}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getStatusText, formatTime, toFixedHandle } from '@/utils/tools'
import Title from '@/components/Title'

export default {
  name: 'DetailBaseInfo',
  components: { Title },
  props: {
    detailBaseInfoData: {
      type: Object,
      default: () => {
        return {
          basePlanOrderInfo: {},
          payeeInfo: {}
        }
      }
    }
  },
  data() {
    return {
      currency_options: [],
      payment_stage_options: [],
      checking_status_options: []
    }
  },
  computed: {
    allOptions() {
      return this.$store.getters.allOptions
    }
  },
  mounted() {
    this.queryAllOptionsHandle()
  },
  methods: {
    formatTime,
    getStatusText,
    toFixedHandle,
    // 请求option放vuex
    async queryAllOptionsHandle() {
      // 核账状态：checking_status
      this.checking_status_options =
        await this.$store.dispatch('base/getBaseDataList', {
          type: 'checking_status'
        })
      // 回款阶段： payment_stage
      this.payment_stage_options =
        await this.$store.dispatch('base/getBaseDataList', {
          type: 'payment_stage'
        })
      // 币种： currency
      this.currency_options =
        await this.$store.dispatch('base/getBaseDataList', {
          type: 'currency'
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.info-style {
  font-size: 14px;
  span {
    display: inline-block;
    padding: 10px 0;
    font-size: 13px;
    color: #303133;
  }
}
</style>
